import { PageContainer } from '@ant-design/pro-components';
import type { TabsProps } from 'antd';
import { Card, Tabs } from 'antd';
import Bazaar from './TabsContent/bazaar';
import Recommend from './TabsContent/recommend';
import Traceability from './TabsContent/traceability';
import styles from './index.less';

const HomePage: React.FC = () => {
  const items: TabsProps['items'] = [
    {
      key: 'traceabilitySystem',
      label: '品质溯源，安心享美食',
      children: <Traceability />,
    },
    {
      key: '2',
      label: '智能推荐，口味定制',
      children: <Recommend />,
    },
    {
      key: '3',
      label: '洞悉市场，把握商机',
      children: <Bazaar />,
    },
  ];

  const data = [
    { id: 1, title: '敬请期待', description: '文字描述文字描述' },
    { id: 2, title: '敬请期待', description: '文字描述文字描述' },
    { id: 3, title: '敬请期待', description: '文字描述文字描述' },
    { id: 4, title: '敬请期待', description: '文字描述文字描述' },
    // 添加更多数据项...
  ];
  const enterprise = [
    {
      id: 1,
      img: 'https://main.qcloudimg.com/raw/2833767c4f8c015714020185c6d02b5e.png',
    },
    {
      id: 2,
      img: 'https://main.qcloudimg.com/raw/35ae1a4636107a9e33111a2f5c2c0fa5.png',
    },
    {
      id: 3,
      img: 'https://main.qcloudimg.com/raw/1582931a4de2929d6f5d6eb7362070a0.png',
    },
    {
      id: 4,
      img: 'https://qcloudimg.tencent-cloud.cn/raw/3a5fb166b6e9d3be5ca90ed3f8475c8c.png',
    },
    {
      id: 5,
      img: 'https://main.qcloudimg.com/raw/a7f8253ee4c3d92335a4671a84eb12dc.png',
    },
    {
      id: 6,
      img: 'https://main.qcloudimg.com/raw/366d552f24bc0b28361edba46477af9c.png',
    },
    {
      id: 7,
      img: 'https://main.qcloudimg.com/raw/9ad6bbf39dbe9d29b376bc17d8ac9c82.png',
    },
    {
      id: 8,
      img: 'https://qcloudimg.tencent-cloud.cn/raw/4e2ba47c6ce08c7296e76101cd976595.png',
    },
    {
      id: 9,
      img: 'https://main.qcloudimg.com/raw/c73926adc408a0c72e7fdede808ace9b.png',
    },
    {
      id: 10,
      img: 'https://qcloudimg.tencent-cloud.cn/raw/f218313ddad35eeb29e4669cf86602e9.png',
    },
    {
      id: 11,
      img: 'https://qcloudimg.tencent-cloud.cn/raw/e4d108b0c6ff6ab05e832a634dc5a0a4.png',
    },
    {
      id: 12,
      img: 'https://main.qcloudimg.com/raw/b068c1069e3794f54169fe7f8bf094fe.png',
    },
    {
      id: 13,
      img: 'https://qcloudimg.tencent-cloud.cn/raw/ff9228b8a10e682de65d634062500993.png',
    },
    {
      id: 14,
      img: 'https://main.qcloudimg.com/raw/ee9e36b94538eb7bd24244d2d697e374.png',
    },
    {
      id: 15,
      img: 'https://qcloudimg.tencent-cloud.cn/raw/bc3f5ac74731c9859b68e73c36553e48.png',
    },
    {
      id: 16,
      img: 'https://main.qcloudimg.com/raw/6b896754b4d7fd9cba7a9ab43d378f4d.png',
    },
  ];
  return (
    <PageContainer ghost loading={false} title=" ">
      <div className={styles.background}>
        <div className={styles.top}>
          <Tabs
            className={styles.tabBox}
            defaultActiveKey="traceabilitySystem"
            items={items}
            tabPosition="left"
            tabBarGutter={50}
            size="large"
            animated
            centered
          />
        </div>
        <div style={{ display: 'flex', marginLeft: 250 }}>
          {data.map((item) => (
            <Card key={item.id} className={styles.card} hoverable>
              <p>{item.title}</p>
              <span>{item.description}</span>
            </Card>
          ))}
        </div>
        <p className={styles.text}>性能强大、安全、稳定的云产品</p>
      </div>
      <div className={styles.enterprise}>
        {enterprise.map((item) => (
          <Card
            className={styles.enterpriseCard}
            key={item.id}
            hoverable
            cover={<img alt="example" src={item.img} />}
          ></Card>
        ))}
      </div>
    </PageContainer>
  );
};

export default HomePage;
